//out: ../css/
@import './base.less';

@vw:3.75vw;
body{
    width: (375/@vw);
    // background-color: aqua;
}

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: (375/@vw);
    height: (44/@vw);
    // background-color: aqua;
    padding: 0 12px 0 18px;
    .left .Navbar_logo{
        width: (61/@vw);
        height: (29/@vw);
        color: #fb7299;
    }

    .right .ic_search_tab{
        color: #ccc;
        width: (22/@vw);
        height: (22/@vw);
    }

    .right a img{
        width: (24/@vw);
        height: (24/@vw);
        margin: 0 (20/@vw);
    }

    .right img{
        width: (72/@vw);
        height: (24/@vw);
    }
}

.choose{
    width: 100%;
    height: (38/@vw);
    // background-color: palegreen;
    display: flex;
    justify-content: start;
    padding: 0 12px 0 18px;
    position: relative;
    border-bottom: 1px solid #ccc;
        .text ul{
            display: flex;
            justify-content: start;
            line-height: (38/@vw);
            li{
                width: (60/@vw);
                height: (38/@vw);
                
                margin-right: auto;
            }
            .first{
                margin-right: (30/@vw);
                width: (35/@vw);
                text-align: center;
                color: #fb7299;
                border-bottom: 2px solid #fb7299;
            }
        }
        .iconfont{
            display: flex;
            width: (60/@vw);
            height: (38/@vw);
            align-items: center;
            position: absolute;
            right: -(30/@vw);
            
        }
}

.video{
    width: 100%;
    padding: (10/@vw);
    display: flex;
    flex-wrap: wrap;
    a{
        position: relative;
        width: (172.5/@vw);
        margin:(2/@vw);
        img{
            width: (172.5/@vw);
                height: (97/@vw);
        }

        .txt{
            width: (172.5/@vw);
            font-size: 12px;
            text-overflow: ellipsis;
            overflow:hidden ;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        // 播放 评论
        .num{
            font-size: 12px;
            padding: 0 (7/@vw);
            width:(172.5/@vw);
            height: (34/@vw);
            display: flex;
            justify-content: space-between;
            color: #fff;
            position: absolute;
            bottom: 27px;
            // font-weight: bolder;
        }
    }
}

.bili{
    width: 87%;
    height: (36/@vw);
    border-radius: (18/@vw);
    background-color: #fb7299;
    margin: (10/@vw);
    position: fixed;
    left: 0;
    bottom: (40px/@vw);
    display: flex;
    justify-content: center;
    align-items: center;
    .iconfont{
        width: (35/@vw);
        height: (16/@vw);
        color: #fff;
    }
    p{
        font-size: 13px;
        color: #fff;
        margin-left: (7/@vw);
    }
}